<template>
  <div>
    <van-nav-bar title="实名认证" @click-left="$router.go(-1)" left-arrow />
    <div v-if="isRegisterIsShow">
        认证成功
    </div>
    <van-form v-else @submit="onSubmit">
      <van-field
                    :value="cardType"
                    :rules="[{ required: true, message: '请选择证件类型' }]"
                    name="card_type"
                    is-link
                    readonly
                    label="证件类型"
                    placeholder="请选择证件类型"
                    @click="cardTypeIsShow = true"
            />
            <van-popup v-model="cardTypeIsShow" round position="bottom">
                <van-picker show-toolbar value-key="name" @confirm="onConfirmCardType" @cancel="cardTypeIsShow = false" :columns="cardOptions"/>
            </van-popup>
      <van-field
        v-model="personForm.card_id"
        name="card_id"
        label="证件号码"
        placeholder="证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"
      />
      <password-captcha ref="captcha" @getCaptcha="getCaptcha"></password-captcha>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import store from "../../../../store/index"
import {getPersonVerifyUrl,createUser,getPersonUserInfo} from "../../../../request/api";
import PasswordCaptcha from "../../../../components/TencentCaptcha/passwordCaptcha.vue"
export default {
  name: "index",
  data() {
    return {
      userMessage:null,
      isRegisterIsShow: false,
      personForm:{
        card_type: "",
        card_id: "",
      },
      
      cardTypeIsShow:false,
      cardOptions: [{id: '0', name: '居民身份证'}, {id: '1', name: '护照'}, {id: 'B', name: '港澳居民通行证'}, {id: 'C', name: '台湾居民通行证'}],
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
      getCaptcha(captcha){
      console.log('传递验证码参数对象',captcha)

      this.getPersonVerify(captcha);
    },
      //实名认证
    getPersonVerify(captcha) {
      let params = {
        cert_type: this.personForm.card_type,
        openid: this.personForm.card_id,
        captcha: captcha
      };
      getPersonVerifyUrl(params).then((res) => {
        console.log("实名认证", res);
        let { transactionNo, url } = res;
        this.$cookies.set('open_id',this.personForm.card_id);
        this.$cookies.set('transactionNo', transactionNo);
        location.href = url;
      });
    },
    //获取用户信息
    getUserInfo() {
      console.log('获取用户信息');
      if(this.$route.query.personName){
        let params = {
          openid:this.$cookies.get("open_id"),
          verified_serialno:this.$cookies.get("transactionNo")
        }
        getPersonUserInfo(params).then(res =>{
          console.log('用户信息',res)
          this.userMessage = res;
          let cardId = res.person.idCard;
          console.log("cardId",cardId);
          if(cardId == this.$cookies.get("open_id")){
            console.log("实名认证");
            let params = {
              card_id:this.$cookies.get("open_id"),
              transaction_id:this.$cookies.get("transactionNo"),
              return_url:'https://ccw.ptaedu.cn/user/create_user'
            }
            createUser(params).then(res =>{
              console.log("认证成功跳转",res);
              this.$cookies.set("token",res.token);
              store.commit('setToken',res.token);
              this.isRegisterIsShow = true;
              this.$router.push('/user/myExam')
            }).catch(err =>{
              this.$message({type:"error",message:"该用户已存在,不需要再次实名认证"})
            })
          }else{
            this.$router.push('/user/create_user');
            this.$message({
              type:"error",
              message:"证件类型或证件号码错误"
            })
          }
        })
      }
      // console.log('获取用户信息');
      // if(this.$route.query.personName){
      //   let params = {
      //     openid:this.$cookies.get("open_id"),
      //     verified_serialno:this.$cookies.get("transactionNo")
      //   }
      //   getPersonUserInfo(params).then(res =>{
      //     console.log('用户信息',res)
      //     this.userMessage = res;
      //     let cardId = res.person.idCard;
      //     console.log("cardId",cardId);
      //     if(cardId == this.$cookies.get("open_id")){
      //       console.log("实名认证");
      //       let params = {
      //         card_id:this.$cookies.get("open_id"),
      //         transaction_id:this.$cookies.get("transactionNo"),
      //         return_url:'https://ccw.ptaedu.cn/user/create_user'
      //       }
      //       createUser(params).then(res =>{
      //         console.log(res);
      //         this.$cookies.set("token",res.token);
      //         store.commit('setToken',res.token);
      //         this.isRegisterIsShow = true;
      //         this.$router.push('/user/myExam');
      //       })
      //     }else{
      //       this.$router.push('/user/create_user');
      //       this.$message({
      //         type:"error",
      //         message:"证件类型或证件号码错误"
      //       })
      //     }
      //   })
      // }
    },
      onConfirmCardType(value, index) {
                console.log(`当前值${value.id}`);
                this.personForm.card_type = value.id;
                this.cardTypeIsShow = false
            },
    onSubmit(values) {
      for(let item of this.cardOptions){
          if(item.name == values['card_type']){
              this.personForm.card_type = item.id
          }
      }
      this.$refs.captcha.show();
    },
  },
  computed:{
      cardType(){
                let cardTypeName = '';
                for (let item of this.cardOptions){
                    if(item.id == this.personForm.card_type){
                        cardTypeName = item.name
                    }
                }
                return cardTypeName;
            }
  },
  components: {
    PasswordCaptcha
  },
};
</script>

<style scoped>
</style>
